<template>
    <div class="express-assign" >
        <!--主任务-->
        <div class="main-task">
            <div v-if="myValue['mission']">
                <div v-show="myValue['mission']['target']['type'] === 'pick_up' || myValue['mission']['target']['type'] === 'go_spot_pick' || myValue['mission']['target']['type'] === 'send_to_send'">
                    <div>指派司机</div>
                    <div class="select-input" style="height: auto;line-height: 20px;padding: 6px 0px 6px 10px" @click="selectSpotPeople" v-if="spotPeopleName">{{spotPeopleName}}</div>
                    <div class="select-input"  style="color:#909399;height: auto;line-height: 20px;padding: 6px 0px 6px 10px" @click="selectSpotPeople" v-else>指派司机</div>
                    <van-actionsheet :close-on-click-overlay="false" v-model="showSelectSpotPeople">
                        <driver-cascader v-model="myValue['driver_id']" :cascaderOption="cascaderOption" @closeSpotActionSheet="closeSpotActionSheet" @selectSpotSiteName="selectSpotSiteName" palaceName="请选择接驳人" style="width: 100%;"></driver-cascader>
                    </van-actionsheet>
                </div>
                <div class="radio">主任务</div>
                <div>
                    <express-radio
                            v-model="myValue['mission']['target']['type']"
                          :dataList='datalist'>
                    </express-radio>
                </div>

                <main-task
                        v-model="myValue['mission']"
                        :taskIndex="1"
                        :option="option"
                        :cascaderOption="cascaderOption"
                        :mapId="'map-main'"
                        :inputId="'inputzhipai'">
                </main-task>
            </div>

        </div>
        <!--主任务-->
        <!--后置任务-->
        <!--<el-row class="paddbottm">-->
            <!--<el-col :span="6" class="alignright">是否指派后置任务：</el-col>-->
            <!--<el-col :span="12">-->
                <!--<el-switch-->
                        <!--v-model="isNextTask"-->
                        <!--active-color="#009688"-->
                        <!--inactive-color="#ccc">-->
                <!--</el-switch>-->
            <!--</el-col>-->
        <!--</el-row>-->
        <div  v-if="myValue['mission'] || myValue['next']">
            <div v-show="myValue['mission']['target']['type'] === 'go_point' || myValue['mission']['target']['type'] === 'pick_up' || myValue['mission']['target']['type'] === 'go_spot_pick'">
                <div class="radio">后置任务</div>
                <div style="padding-bottom: 0.06rem">
                    <express-radio
                            v-model="myValue['next']['target']['type']"
                            :dataList='datalistNext'>
                    </express-radio>
                </div>
                <main-task
                        v-model="myValue['next']"
                        :taskIndex="2"
                        :option="option"
                        :cascaderOption="cascaderOption"
                        :mapId="'map-next'"
                        :inputId="'inputnext'">
                </main-task>
            </div>
        </div>
        <!--后置任务-->

    </div>
</template>

<script>
    // import {native} from '../../../app.js';
    import DriverCascader from '.././cascader/Cascader';
    import MainTask from '../assign/AssignTask';
    import ExpressRadio from '../../../radio/Radio';
    import {Notify, Button, Row, Col, Toast, Actionsheet} from 'vant';
    export default {
        name: "ExpressAssign",
        components: {
            MainTask,
            ExpressRadio,
            DriverCascader,
            [Notify.name]:Notify,
            [Actionsheet.name]:Actionsheet,
            [Button.name]:Button,
            [Row.name]:Row,
            [Toast.name]:Toast,
            [Col.name]:Col
        },
        props: {
            value: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            datalist: {
                type: Array,
                default: () => {
                    return []
                }
            },
            datalistNext: {
                type: Array,
                default: () => {
                    return []
                }
            },
            option: {
                type: Array,
                default: () => {
                    return []
                }
            },
            cascaderOption: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                myValue: {},
                showSelectSpotPeople: false,
                spotPeopleName: false,
                expressModel: 'pick_up',
                expressModelNext: 'go_spot_send',
                mainTaskData: {}, // 主任务
                isNextTask: false, // 是否安排后置任务
                nextTaskData: {}, // 后置任务
                assignDriver: '', // 指派司机选择
            }
        },
        mounted() {
            this.myValue = this.value;
            // native.initTopbar('{"backCallbackFunc":"goBack"}');
            // window['goBack'] = () => {
            //     this.goBack();
            // };
        },
        watch: {
            value: {
                handler() {
                    this.myValue = this.value;
                },
                deep:true
            },
            myValue: {
                handler(value) {
                    this.$emit('input', value);
                },
                deep: true
            }
        },
        methods: {
            // goBack() {
            //     if (this.spotPeopleName) {
            //         this.spotPeopleName = false;
            //     } else {
            //         native.onJSCallBack(0);
            //     }
            // },
            selectSpotPeople() {
                this.showSelectSpotPeople = true
            },
            closeSpotActionSheet() {
                this.showSelectSpotPeople = false
            },
            selectSpotSiteName(val) {
                this.spotPeopleName = val;
                this.showSelectSpotPeople = false
            }
        }
    }
</script>

<style scoped lang="less">
    .express-assign {
            /*width: 3.55rem;*/
            padding: 0.17rem 0.18rem 0.48rem 0.18rem;
            margin: 0.11rem auto 0.68rem;
            border-radius: 0.06rem;
            background-color: #fff;
        .van-actionsheet{
            position: fixed;
            top: 0px;
            left: 0px;
            max-height: 100%;
            height: 100vh;
            z-index: 3000;
        }
        .select-input{
            width: 100%;
            height: 0.4rem;
            line-height: 0.4rem;
            padding-left: 0.08rem;
            margin-top: 0.14rem;
            border: 1px solid #DCDFE6;
            border-radius: 0.04rem;
        }
        .radio{
            padding: 0.08rem 0 0.06rem 0;
        }
    }
</style>
